<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		.cancel_btn
		{
		margin:10px 0px 5px 35px
		}
		.continue_btn
		{
		margin:10px 35px 5px 0px
		}
		.selection_btn
		{
		background-image: url("file:///android_res/drawable/dropdown_bg.png");
		}
		</style>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" href="../css/styles.css" />
		<!-- <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> -->
		<link rel="stylesheet" href="../css/jquery.mobile-1.3.1.min.css">
		<link rel="stylesheet" href="file:///android_asset/css/in.css">
		<!-- Extra Codiqa features -->
		<link rel="stylesheet" href="codiqa.ext.css">
		<!-- jQuery and jQuery Mobile -->
		<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
		<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
		<!-- Extra Codiqa features -->
		<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
		<script src="file:///android_asset/js/login.js"></script>
	</head>
	<body >
		<div class="ui-header ui-bar-b" align="center" data-theme="b" data-role="header" role="banner">
			<p style="padding:10px;">
			<font size="3"> Update Rope Route </font></p>
			<img style="float:right;height:35px; margin:-37px 6px 0px 0px;width:50px;border-radius:10px;" src="../images/signout.png" onclick="signout()">
		</div>
		<!-- Header -->
			<div data-role="content" >
				<form id="myForm" method="POST">       
					<div style="margin:5px 0px 0px 0px">
						  <input name="routeName" id="routeName" placeholder="Rope Route Name"  type="text" onblur="alertrouteName()">
					</div>     
					<div style="margin:5px 0px 0px 0px">
						<select id="select-location" name="select-location" onchange="changeLocation(this.value)">
							<option value="" >Location </option>
						</select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						<select id="select-area" name="select-area" onclick="alertLocation()">
							<option value="" style="border:5px solid red" >Area </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select  id="select-grade" name="select-grade" onclick="alertLocation()">
						  <option value="">Grade </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px;">
						 <select style="border:1px solid red;" id="select-type" name="select-type" onclick="alertLocation()">
						  <option value="">Type </option> 
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select  id="select-color" name="select-color" onclick="alertLocation()">
						  <option value="">Color </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select id="select-status" name="select-status" >
						  <option value="1" >Active </option>
						  <option value="2">InActive </option>
						  </select>
					</div>
					<div>
						<a href="#" style="float:left;margin:0px 10px 0px 0px;"> <img src="../images/cancel.png" onclick="goBack()" width = "120" height="40"></a> 
						<a href="#" style="float:right;margin:0px 0px 0px 10px;"> <img src="../images/continue.png" onclick="seachPage()" width = "120" height="40"></a>           
					</div> 
			</form>
			<div><p style="font-size:45pt;">&nbsp;</p></div>
		</div>				 
</body>
	<div style="background-image: url(../images/topbar.png); bottom:0;text-align:center;margin:0px 0px 0px 0px;" id="sample" class="ui-footer-fixed " > 
		<div style="margin:8px 0px -7px 17px;">
			<img  style="margin:0px -1px 13px -17px;" class="folder" src="../images/folder.png"  height="40" width="40" onclick="folder()">
			<img  style="margin:0px -1px 13px 19px;" class="folder" src="../images/settings.png" height="40" width="40" onclick="settings()">
			<img  style="margin:0px -1px 13px 19px;" class="" src="../images/home.png" height="40" width="40" onclick="home()">
			<img  style="margin:0px -1px 13px 19px;" class="folder" src="../images/boulder.png" height="40" width="40" onclick="boulder()">
			<img  style="margin:0px -1px 13px 19px;" class="folder" src="../images/route.png" height="40" width="40" onclick="route()">
		</div>
	</div>
</html>
	<script type="text/javascript" charset="utf-8" src="file:///android_asset/js/cordova.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
	function signout(){
		window.location='index_login.html';
	}
	function folder(){
		<!-- window.location='http://forerunnerpro.com/?nr=0'; -->
		navigator.app.loadUrl('http://forerunnerpro.com/?nr=0', { openExternal:true });
	}
	function settings(){
		window.location='settings.html';
	}
	function home(){
		window.location='option.html';
	}
	function boulder(){
		window.location='boulder_option.html';
	}
	function route(){
		window.location='route_option.html';
	}
	var token1=encodeURIComponent(window.localStorage["token"]);
	var searchValue1='';var searchValue2='';var searchValue3='';var searchValue4='';var searchValue5='';var searchValue6='';var searchValue7='';
	document.addEventListener("deviceready", updateRopeRoute, false);
	function updateRopeRoute(){
		var email=window.localStorage["username1"];
			// create location options
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/getlocationsforuser?userName='+email+'&token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
					if(data.status == "SUCCESS"){
							$.each(data.data, function(key,value){	
							$('#select-location').append($("<option style='border: 2px solid blue;'></option>").attr("value",value.locationId).text(value.name));
							window.localStorage["locationGroupId"]=value.locationGroupId;
							});				
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}
				}
			});
		//get climb system id by location group id
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/climbsystemsbygroup/'+window.localStorage["GroupId"]+'/?token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
						if(data.status == "SUCCESS"){
							//navigator.notification.alert("data value : "+data.data);
							$.each(data.data, function(key,value){
								window.localStorage["climbSystemId"] = data.data.climbSystemId;
							 });				
						}
					}
			});		
	}
	function goBack(){
		window.location='route_option.html';
	}
	function alertrouteName(){
			var routeName=$("#routeName").val();
			if(routeName==""){
				searchValue2='';
			}
			else{
				var Name="routeName";
				searchValue2="'"+Name+"':'"+routeName+"',";
			}
	}
	function alertLocation(){
			var locationArea=$("#select-location").val();
			if(locationArea==""){
				navigator.notification.alert("Please Select A Location");
			}
	}
	function seachPage(){
		var routeName=document.getElementById('routeName').value;
		var location=document.getElementById('select-location').value;
		var area=document.getElementById('select-area').value;
		var grade=document.getElementById('select-grade').value;
		var type=document.getElementById('select-type').value;
		var color=document.getElementById('select-color').value;
		var status=document.getElementById('select-status').value;
		var a=document.getElementById('select-status').value;
		window.localStorage["status1"]=a;
		var s="status";
			searchValue1="'"+s+"':'"+a+"',";
			if(area==""){
				searchValue3='';
			}
			else{
				var area1="areaId";
				searchValue3="'"+area1+"':'"+area+"',";
			}
			if(grade==""){
				searchValue4='';
			}else{
				var Grade="grade";
				searchValue4="'"+Grade+"':'"+grade+"',";
			}
			if(type==""){
				searchValue5='';
			}else{
				var Type="routeType";
				searchValue5="'"+Type+"':'"+type+"',";
			}
			if(color==""){
				searchValue6='';
			}
			else{
				var Color="color";
				searchValue6="'"+Color+"':'"+color+"',";
			}
		var searchValue="{"+searchValue1+searchValue2+searchValue3+searchValue4+searchValue5+searchValue6+searchValue7;
		searchValue = searchValue.replace(/'/g, '"');
		var strlen = searchValue.length;
		searchValue=searchValue.slice(0,strlen-1);
		searchValue+="}";
		window.localStorage["searchValue"]=searchValue;
		if(location==""){
			navigator.notification.alert("Please Select A Location");
			return false;
		}
		else{
			$.ajax({
					type: "POST",
					url: window.localStorage["url"]+'/routesforupdate?token='+token1,
					contentType: "application/json; charset=utf-8",
					data:window.localStorage["searchValue"],
					success: function(data){
							if(data.status == "SUCCESS"){
								window.location='search_route.html';
							}
							else if(data.errorCode == "241"){
								navigator.notification.alert("Route Not Found");
								return false;
							}
							else{
								navigator.notification.alert("Please Sign In");
								window.location='index_login.html';
								return false;
							}
						}							
				});
		}
	}
	function changeLocation(id){
		var locationsCheck=document.getElementById('select-location').value;
		if(locationsCheck==""){
		}else{
		$('#select-area option').remove();
		$('#select-area').parent().find('.ui-btn-text').text("Area");
		$('#select-grade option').remove();
		$('#select-grade').parent().find('.ui-btn-text').text("Grade");
		$('#select-color option').remove();
		$('#select-color').parent().find('.ui-btn-text').text("Color");	
		$('#select-type option').remove();
		var locationId="locationId";
		searchValue7="'"+locationId+"':'"+id+"',";
		// create area options
			$.ajax({
					type: "GET",
					url: window.localStorage["url"]+'/locations/'+id+'/areas?token='+token1,
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function(data){ 
							if(data.status == "SUCCESS"){
								$('#select-area').append($("<option></option>").attr("value","").text("Area"));
								$.each(data.data, function(key,value){	
								$('#select-area').append($("<option style='border:5px solid red'></option>").attr("value",value.areaId).text(value.areaName));
								 });				
							}
							else if(data.errorCode == "241"){
								$('#select-area').html();
							}
					}
			});
		//create grade options 
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/gradesbyclimbsystem/'+window.localStorage["climbSystemId"]+'/?token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
					if(data.status == "SUCCESS"){
						$('#select-grade').append($("<option></option>").attr("value","").text("Grade"));
						$.each(data.data, function(key,value){	
						$('#select-grade').append($("<option></option>").attr("value",value.gradeId).text(value.gradeName));
						 });				
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}
				}
			});	
		// create type options
			$.ajax({
					type: "GET",
					url: window.localStorage["url"]+'/routetypesbyroute/rope?token='+token1,
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function(data){
							if(data.status == "SUCCESS"){
								$('#select-type').append($("<option></option>").attr("value","").text("Type"));
								$.each(data.data, function(key,value){	
								$('#select-type').append($("<option></option>").attr("value",value.routeTypeId).text(value.routeTypeName));
								});				
							}
							else if(data.errorCode == "241"){
								$('#select-type').html();
							}
						}
			});
		// create colors options
			$.ajax({
					type: "GET",
					url: window.localStorage["url"]+'/colorsbylocationgrp/'+window.localStorage["GroupId"]+'/?token='+token1,
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function(data){
						if(data.status == "SUCCESS"){
							$('#select-color').append($("<option></option>").attr("value","").text("Color"));
							$.each(data.data, function(key,value){	
							$('#select-color').append($("<option></option>").attr("value",value.colorId).text(value.colorName));
							});				
						}
						else if(data.errorCode == "241"){
							$('#select-color').html();
						}
					}
			});
		}
	}
</script>
